
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<title>jQuery.width</title>
	<style type="text/css">
		div{
			width: 3000px;
			height: 100px;
			border: 5px solid #ccc;
		}
	</style>
</head>
<body>

<div id="aaron" style="background:red;border:20px solid #ccc;">尺寸算法</div>

<button id="test1">Width</button>
<button id="test2">Height</button>
<button id="test3">innerWidth</button>
<button id="test4">innerHeight</button>
<button id="test5">outerWidth(true)</button>
<button id="test6">outerHeight(true)</button>

<script type="text/javascript">


var cssExpand = ["Top", "Right", "Bottom", "Left"];

function augmentWidthOrHeight(elem, name, extra, isBorderBox, styles) {
	var i = extra === (isBorderBox ? "border" : "content") ?
	// If we already have the right measurement, avoid augmentation
	4 :
	// Otherwise initialize for horizontal or vertical properties
	name === "width" ? 1 : 0,
		val = 0;

	for (; i < 4; i += 2) {
		// both box models exclude margin, so add it if we want it
		// 如果引入了margin
		// outerWidth(true) 
		// outerHeigth(true) 
		// marginRight
		// marginLeft
		// marginTop
		// marginBottom
		if (extra === "margin") {
			val += jQuery.css(elem, extra + cssExpand[i], true, styles);
		}

		if (isBorderBox) {
			// border-box includes padding, so remove it if we want content
			//paddingRight
			//paddingLeft
			if (extra === "content") {
				val -= jQuery.css(elem, "padding" + cssExpand[i], true, styles);
			}

			// at this point, extra isn't border nor margin, so remove border
			// 减去2边的宽度
			//borderRightWidth
			//borderLeftWidth
			//borderTopHeight 
			//borderBottomHeight
			if (extra !== "margin") {
				val -= jQuery.css(elem, "border" + cssExpand[i] + "Width", true, styles);
			}
		} else {
			// at this point, extra isn't content, so add padding
			val += jQuery.css(elem, "padding" + cssExpand[i], true, styles);

			// at this point, extra isn't content nor padding, so add border
			if (extra !== "padding") {
				val += jQuery.css(elem, "border" + cssExpand[i] + "Width", true, styles);
			}
		}
	}

	return val;
}

//获取最终属性
//https://github.com/jquery/jquery/pull/524
var getStyles = function(elem) {
	return elem.ownerDocument.defaultView.getComputedStyle(elem, null);
};

var elem = document.getElementById('aaron');

$('#test1').click(function() {
	alert( elem.offsetWidth)
})

$('#test2').click(function() {
	alert(elem.offsetHeight)
})

$('#test3').click(function() {
	var val = elem.offsetWidth;
	var styles = getStyles(elem)
	alert(val + augmentWidthOrHeight(elem, 'width', "padding", true, styles))
})

$('#test4').click(function() {
	var val = elem.offsetHeight;
	var styles = getStyles(elem)
	alert(val + augmentWidthOrHeight(elem, 'height', "padding", true, styles))
})

$('#test5').click(function(){
	var val = elem.offsetWidth;
	var styles = getStyles(elem)
	alert(val + augmentWidthOrHeight(elem, 'width', "border", true, styles))
})

$('#test6').click(function(){
	var val = elem.offsetHeight;
	var styles = getStyles(elem)
	alert(val + augmentWidthOrHeight(elem, 'height', "border", true, styles))
})



</script>
</body>
</html>